<template>
  <div class="profile-page">
    <!-- 用户信息头部 -->
    <div class="user-header">
      <Image round width="60px" height="60px"
        :src="userInfo.avatar"
        @click="handleUserInfo"
        error-icon="https://i2.hdslb.com/bfs/face/31ee59c69e9ec779b5e8284ccbfa47d1a0478d49.jpg@96w_96h.avif"
        class="user-avatar" />
      <div class="user-info"
        v-if="userStore.isAuthenticated">
        <div class="user-name">
          {{ userInfo.nickname || '未设置昵称' }}
          <Tag v-if="userInfo.realVerified"
            type="success" size="medium">已实名</Tag>
        </div>
      </div>
      <Button v-else type="primary" size="small"
        @click.stop="gotoLogin">登录/注册</Button>
      <UserAmount />
    </div>
    <Grid>
      <GridItem text="卖卡记录" icon="balance-list"
        is-link to="/records/sell" />
      <GridItem text="资金明细" icon="bill" is-link
        to="/records/fund" />
      <GridItem text="提现记录"
        icon="cash-back-record" is-link
        to="/records/withdraw" />
      <GridItem text="提现账户" icon="gold-coin"
        is-link to="/withdraw/account" />
    </Grid>
    <CellGroup>
      <Cell title="实名认证" icon="certificate"
        is-link to="/auth/real" />
      <Cell title="绑定微信" icon="wechat" is-link
        to="/auth/wx" />
      <Cell title="修改密码" icon="lock" is-link
        to="/profile/password" />
      <Cell title="常见问题" icon="question" is-link
        to="/submit/faq" />
      <Cell title="平台协议" icon="info" is-link
        to="/platform" />
      <Cell title="意见反馈" icon="comment" is-link
        to="/profile/feedback" />
    </CellGroup>
    <CellGroup v-role="'ROOT'">
      <Cell title="前端调试" icon="question">
        <Switch
          v-if="useModeStore().nodeEnv === 'development'"
          :modelValue="useModeStore().current === ModeEnum.DEV"
          @update:modelValue="
            (e: any) => useModeStore().setMode(Boolean(e) ? ModeEnum.DEV : ModeEnum.PROD)
          " size="small" class="mr-2" />
      </Cell>
    </CellGroup>

    <!-- 退出登录 -->
    <div class="logout-btn"
      v-if="userStore.isAuthenticated">
      <Button round block type="danger"
        class="btn" @click="handleLogout">
        退出登录
      </Button>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  Button, Cell, CellGroup, Grid, GridItem, Image, showConfirmDialog,
  Switch,
  Tag,
} from 'vant';
import { computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';

import useModeStore, { ModeEnum } from '@/stores/mode.store';
import useUserStore from '@/stores/user.store';

import UserAmount from '../components/UserAmount.vue';
import { RealAuthType } from '../const';

const router = useRouter();
const userStore = useUserStore();

const userInfo = computed(() => ({
  avatar: userStore.userInfo?.avatar,
  nickname: userStore.userInfo?.nickName,
  mobile: userStore.userInfo?.phonenumber || '188****8888',
  realVerified: userStore.userInfo?.realFlag === RealAuthType.已实名 || false,
  withdrawAccount: userStore.userInfo?.balance,
}));

onMounted(() => {
  userStore.fetchUserInfo();
});

const handleUserInfo = () => {
  if (userStore.isAuthenticated) {
    router.push({ name: 'ProfileEdit' });
  }
};

const gotoLogin = () => {
  router.push({ name: 'LoginPage' });
};

const handleLogout = () => {
  showConfirmDialog({
    title: '提示',
    message: '确定要退出登录吗？',
  }).then(() => {
    userStore.logout();
  });
};
</script>

<style lang="less" scoped>
.profile-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  .user-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 16px 0px;

    .user-avatar {
      margin-right: 8px;
    }

    .user-info {
      flex: 1;

      .user-name {
        font-size: 14px;
        font-weight: 500;
        display: flex;
        align-items: center;
        color: var(--van-cell-text-color);

        .van-tag {
          margin-left: 8px;
        }
      }

      .user-phone {
        font-size: 14px;
        color: var(--van-text-color-2);
      }
    }
  }

  .user-balance {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    border-radius: 8px;
    margin-left: auto;

    .balance-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .balance-title {
        font-size: 14px;
        color: var(--van-cell-text-color);
        border: 1px solid #AFAFB1;
        padding: 2px 5px;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;

        .icon {
          font-size: 12px;
        }

        .rodate {
          animation: rodate .5s linear infinite;
        }
      }

      .balance-value {
        font-size: 18px;
        font-weight: 500;
        color: var(--van-text-color);
      }
    }
  }

  .logout-btn {
    flex-grow: 1;
    display: flex;
    margin: 30px 16px;

    .btn {
      margin-top: auto;
    }
  }
}

@keyframes rodate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>
